CSS Diner

Voilà quelques infos.

Vous êtes en train d'apprendre les sélecteurs CSS. Les sélecteurs vous permettent de choisir les éléments HTML sur lesquels vous voulez appliquer un style.

Une règle CSS

p {
   margin-bottom: 12px;
}

Ici, le "p" est le sélecteur (il sélectionne tous les éléments <p>) et "margin-bottom: 12px;" est la déclaration de style (elle applique une marge de 12 pixels autour des éléments <p> sélectionnés).

Pour jouer, dans l'éditeur ci-dessous saisissez le sélecteur CSS qui sélectionne les choses correctes sur la table. Si vous réussissez, vous avancez au niveau suivant.

Passez la souris au dessus des choses sur la table pour voir leurs balises HTML.

Une aide sur les sélecteurs se trouve à droite. →

Ok, j'ai compris.

Aidez moi, je suis coincé.

style.css

Editeur CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Entrée

{
/* les déclarations de style viennent ici */
}

/*
Saisissez un nombre pour aller directement à un niveau
Ex → 5 pour aller au niveau 5
*/

table.html

Code HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Qu'est ce que c'est ?

Ceci est un jeu pour vous aider à apprendre les sélecteurs CSS. Saisissez le bon sélecteur pour passer chaque niveau. Il y a une aide sur la droite.

Made by @flukeout with special thanks to...

@k88hudson, @antlam7 and @smashman2004.

Traduction et adaptation française : François Piat